<template>
    <div class="x-page-c">
        <x-header v-if="!hiddenHeader" class="x-header">
            <slot name="title">
                <div>{{title}}</div>
            </slot>
            <slot name="right" slot="right"></slot>
            <slot name="left" slot="left">
                <x-button @click="$router.go(-1)">
                    <i class="cubeic-back"></i>
                </x-button>
            </slot>
        </x-header>
        <main class="main-content" :style="mainContentStyle">
            <slot name="main"></slot>
        </main>
        <slot name="fixed"></slot>
        <x-tab-bar v-if="tabBar" :active="tabBar"></x-tab-bar>
    </div>

</template>

<script>
import XHeader from './XHeader';
import XButton from '../../components/XButton';
import XTabBar from 'src/mobile/components/XTabBar';

export default {
    components: {
        XButton,
        XHeader,
        XTabBar
    },
    props: {
        hiddenHeader: {
            type: Boolean,
            default: true
        },
        tabBar: {
            type: String,
            default: ''
        },
        /**
         * 修改页面标题
         */
        title: {
            type: String,
            default: '商机系统'
        },
        fixedMainContent: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        mainContentStyle() {
            let style = {};
            let height = window.innerHeight;
            if (!this.hiddenHeader) {
                style['paddingTop'] = '44px';
                height -= 44;
            }
            if (this.tabBar) {
                style['paddingBottom'] = '49px';
                height -= 49;
            }
            if (this.fixedMainContent) {
                // style['height'] = `calc(${height})`;
                style['height'] = height+'px';
                style['overflow'] = 'hidden';
            }
            return style;
        }
    },
    mounted() {
        this.changeNativeTitle();
    },
    methods: {
        changeNativeTitle() {
            document.title = this.title.toString();
        }
    }
};
</script>

<style lang="scss">
.x-page-c {
    position: relative;
    display: flex;
    flex-direction: column;
    .x-header {
        flex-grow: 0;
    }
    .right-btn {
        width:100%;
    }
    .main-section-wrap {
        height: 100px;
        flex-grow: 1;
        flex-shrink: 0;
    }


}
</style>